import React, { Component } from 'react';
import { useDrop } from 'react-dnd';
import styles from './style.less';

export default (WrappedComponent) => {
  class DropWrapperComponent extends Component {
    constructor(props) {
      super();
    }
    render() {
      const { dropRef, isOver, ...restProps } = this.props;
      return (
        <div
          ref={dropRef}
          className={`${styles.dropWrapperContainer} ${
            isOver ? styles.activeDrop : null
          }`}
        >
          <WrappedComponent {...restProps} />
        </div>
      );
    }
  }

  return ({ nanoid, onDrop, ...restProps }) => {
    const [{ isOver }, drop] = useDrop(() => ({
      accept: 'TreeChildItem',
      drop: (dragItem, monitor) => {
        const isOver = monitor.isOver();
        if (isOver) {
          onDrop && onDrop({ dragItem, nanoid });
        }
      },
      collect: (monitor) => ({
        isOver: monitor.isOver({ shallow: true }),
      }),
    }));

    return (
      <DropWrapperComponent
        nanoid={nanoid}
        onDrop={onDrop}
        {...restProps}
        dropRef={drop}
        isOver={isOver}
      />
    );
  };
};
